<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <button @click="copy">控制台打印所有视频的base64数据</button>
      <div v-for="(v,i) in videoUrl" :key="i">
        <video
          @loadeddata="createPreImg($event,i)"
          :src="v.url"
          crossorigin="anonymous"
          preload="auto"
        ></video>
      </div>
    </div>
  </body>
  <script type="text/javascript" src="/static/plug_in/vue/vue.min.js"></script>
  <script src="/file.js"></script>
  <script>
    new Vue({
      el: "#app",
      data: {
        src: "",
        videoUrl: [],
      },
      mounted() {
        this.videoUrl = list.map((v) => {
          return {
            url: path + v,
            name: v,
            base64: "",
          };
        });
        console.log(list);
      },
      methods: {
        copy() {
          console.log(this.videoUrl);
        },
        createPreImg(event, index) {
          const _this = this;
          const videoEle = event.target;
          videoEle.currentTime = 0; // 设置视频开始播放时间
          videoEle.addEventListener("canplay", function () {
            const canvas = document.createElement("canvas");
            const scale = 0.6; // 压缩系数
            canvas.width = videoEle.videoWidth * scale;
            canvas.height = videoEle.videoHeight * scale;
            canvas
              .getContext("2d")
              .drawImage(videoEle, 0, 0, canvas.width, canvas.height);
            _this.videoUrl[index].base64 = canvas.toDataURL("image/webp");
          });
        },
      },
    });
  </script>
</html>
